<template>
  <div
    class="w-full bg-[#252632] rounded-xl border-2 border-[var(--logo-color)] overflow-hidden"
  >
    <div class="w-full relative">
      <router-link :to="`/discover/${videoInfo.videoId}`"
        ><video :src="videoInfo.videoUrl" alt=""
      /></router-link>
      <div
        class="flex w-full items-center absolute bottom-0 video-info px-2 sm:px-4 py-2"
      >
        <svg
          t="1698473807871"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5058"
          width="20"
          height="20"
        >
          <path
            d="M510.22354 915.870304l-352.119663-375.931998c-67.23838-72.341608-99.459223-146.19464-95.817276-219.767286 4.707209-95.256504 69.033259-153.085584 71.77879-155.4924 50.821479-43.370787 105.234763-65.225537 162.05077-65.225537 97.723695 0 176.116113 64.493873 214.052121 103.045911 38.048571-38.663578 116.102275-103.045911 214.274178-103.045911 56.816007 0 111.168915 21.85475 161.65782 64.886823 3.193739 2.744507 67.409273 60.573587 72.116481 155.831115 3.698229 73.518411-28.579919 147.425677-95.760994 219.652675L510.22354 915.870304 510.22354 915.870304 510.22354 915.870304zM174.801165 211.635071c0 0-47.5162 43.648103-50.482765 112.570845-2.411933 55.866379 24.205285 114.195855 79.229482 173.255972l306.676681 327.46617 306.730916-327.46617c54.913681-59.116399 81.641415-117.444852 79.118965-173.312254-2.970658-68.866461-50.428529-112.570845-50.987255-113.019053-38.331004-32.725332-79.123059-49.591465-120.698966-49.591465-104.730273 0-188.893114 105.514125-189.675944 106.577341l-25.218358 32.04995-24.316825-32.725332c-0.336668-0.444115-83.826174-105.8467-189.116195-105.8467C254.484995 161.595398 213.69294 178.460508 174.801165 211.635071L174.801165 211.635071 174.801165 211.635071 174.801165 211.635071zM174.801165 211.635071"
            p-id="5059"
          ></path>
        </svg>
        <span>{{
          videoInfo.favoriteCount > 9999
            ? parseInt(videoInfo.favoriteCount / 10000) + "万"
            : videoInfo.favoriteCount
        }}</span>
        <span class="absolute right-4">{{ videoInfo.length }}</span>
      </div>
    </div>
    <span class="block px-2 sm:px-4 mt-2 text-white">{{
      videoInfo.title
    }}</span>
    <span
      v-if="videoInfo.hasOwnProperty('author') && viewFlag"
      class="flex items-center text-[#8d8e94] sm:px-4 px-2 py-2 text-[14px]"
    >
      <router-link :to="`/user/${videoInfo.author.userId}`" target="_blank">
        <span class="hover:text-white cursor-pointer inline-flex items-center">
          <span class="text-[1.2rem]">@</span>
          <span class="user-name"
            >{{
              videoInfo.author.nickname
                ? videoInfo.author.nickname
                : " Cizzy-未知用户"
            }}
          </span>
        </span>
      </router-link>
      <span class="svg-text">{{
        " · " + videoInfo.createAt.substring(0, 10)
      }}</span>
    </span>
  </div>
</template>

<script setup>
import { toConcernAPI } from "@/http/api/concern";
import { watch } from "vue";

const props = defineProps({
  videoInfo: Object,
  viewFlag: {
    default: true,
    type: Boolean,
  },
});
const { videoInfo } = props;

function setDefaultImage(e) {
  e.target.src = "src/assets/img/cizzy-loading.gif";
  e.srcElement.onerror = null;
}
</script>

<style lang="scss" scoped>
.video-info {
  color: white;
  svg {
    fill: white;
    cursor: pointer;
  }
}

.user-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 7rem;
}
</style>